<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import { onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({
      date: [],
      totalFlyDistance: [],
      totalFlyTime: [],
    }),
  },
});

// 监听数据变化
watch(
  () => props.data,
  (newData) => {
    if (newData && Object.keys(newData).length > 0) {
      initEcharts();
    }
  },
  { deep: true },
);

const initEcharts = () => {
  renderEcharts({
    grid: {
      bottom: 0,
      containLabel: true,
      left: '1%',
      right: '1%',
      top: '2 %',
    },
    series: [
      {
        // name: "Evaporation",
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return '飞行距离' + ' ' + value;
          },
        },
        data: props.data.totalFlyDistance,
        // [2.0, 4.9, 7.0, 23.2, 25.6, 16.7],
        itemStyle: {
          color: '#2F69EB',
        },
      },
      {
        // name: "Evaporation",
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return '飞行时长' + ' ' + value;
          },
        },
        data: props.data.totalFlyTime,
        // [2.0, 4.9, 7.0, 23.2, 25.6, 16.7],
        itemStyle: {
          color: '#F7B817',
        },
      },
      // {
      //   // name: "Temperature",
      //   type: 'line',
      //   yAxisIndex: 1,
      //   tooltip: {
      //     valueFormatter: function (value) {
      //       return '飞行时长' + ' ' + value;
      //     },
      //   },
      //   data: props.data.totalFlyTime,
      //   // [2.0, 2.2, 3.3, 4.5, 6.3, 5.2],
      //   itemStyle: {
      //     color: '#f3c96b',
      //   },
      // },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    xAxis: [
      {
        type: 'category',
        data: 
        // props.data.date,
        ["2025-01", "2025-02", "2025-03", "2025-04", "2025-05"],
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        // name: "Precipitation",
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        type: 'value',
        // name: "Temperature",
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
  });
};
onMounted(() => {
  initEcharts();
});
</script>

<template>
  <EchartsUI ref="chartRef" style="height: 300px" />
</template>
